<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*
			{
				padding: 0px;
				margin: 0px;   /* 取消所有的内外边距 */
			}
			img
			{
				width: 500px;
				height: 333px;
			}
			#outer
			{
				width: 520px;
				height: 333px;
				margin: 50px auto;
				background-color: yellowgreen;
				padding: 10px 0;   /* 设置左右的边距为10 ，上下的内边距为0*/
				position: relative;
				/* overflow: hidden;  /* 将移除outerdiv的元素都裁剪掉 */ */
				
			}
			#imgList{
				list-style: none;  /* 去除小圆点*/
				position: absolute;  /* 因为这个ul要去移动，所以必须开启定位，给子元素开启绝对定位，最好给父元素同时开启绝对定位*/
				/* left: -1040px; */
				
			}
			#imgList li{
				float: left;
				margin: 0 10px;  /* 设置左右的外边距*/
			}
			#navDiv
			{
				position: absolute;  /* 跟ul是兄弟元素，后开启绝对定位的会显示在上面*/
				bottom: 15px;   /* 设置所有的超链接离底下（它的父元素）15px*/
			}
			#navDiv a
			{
				float: left;  /* 设置浮动就已经把它变为块元素了  才可以设置它的宽度和长度*/
				width: 15px;
				height: 15px;
				margin: 0 5px;
				background-color: red;
				 opacity: 0.5;  /* 开启半透明*/ 
				/* filter: alpha(opacity=50);  /* 兼容ie8*/ */
			}
			#navDiv a:hover
			{
				background-color: aqua;
			}
			
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				//设置由于图片数量的不同，ul宽度的不同
				var imgList=document.getElementById("imgList");
				var img=document.getElementsByTagName("img");
				imgList.style.width=520*img.length+"px";
				
				//设置由于超链接数量的不同，同样达到居中的效果
				var outer=document.getElementById("outer");
				var navDiv=document.getElementById("navDiv");
				navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";  //为什么为什么它的可见宽度就不用style
				
				//设置默认的第一张图片上面的小点的颜色
				var allA=document.getElementsByTagName("a");
				var index=0;
				allA[index].style.backgroundColor="aqua";
				
			//为所有的超链接绑定响应函数
			for(var i=0;i<allA.length;i++)
			{
				allA[i].num=i;  // 这样就可以直接为它加属性的
				allA[i].onclick=function()
				{
					index=this.num;
					//imgList.style.left=(-(index*520))+"px";
					//allA[index].style.background="aqua";
					setA();
					move(imgList,20,-520*index,"left",function()
					{
						
					})
				}
			}
			
			//创建一个方法用来设置选中的a
			function setA()
			{
		         //将所有变成红色
						 for(var i=0;i<allA.length;i++)
						 {
							 allA[i].style.backgroundColor="red";
						 }
				//将选中的a变成aqua
						allA[index].style.backgroundColor="aqua";
						//alert("gg");
			}
			
			function getStyle(obj,name)
			{
				if(window.getComputedStyle)
				{
					return getComputedStyle(obj,null)[name];
				}
				else
				{
					return obj.currentStyle[name];
				}
			}
			var timer;
			//  objdiv speed速度 zdian终点 fangx样式
			function move(obj,speed,zdian,fangx,callback)
			{
				clearInterval(obj.timer);
					var curry=parseInt(getStyle(obj,fangx));
					if(curry>zdian)
					{
						speed=-speed;
					}
					obj.timer=setInterval(function()
					{
						
						var oldvalue=parseInt(getStyle(obj,fangx));
						var newvalue=oldvalue+speed;
							if((speed<0&&newvalue<zdian)||(speed>0&&zdian<newvalue))
							{
								newvalue=zdian;
							}
							obj.style[fangx]=newvalue+"px";
						if(newvalue==zdian)
						{
							clearInterval(obj.timer);
							callback &&callback();
						}
						
					},30)
				
			}
			
			
			
		}
		</script>
	</head>
	<body>
		<div id="outer">
			<ul id="imgList">
				<li><img src="../img/富尔恣.png" ></li>
				<li><img src="../img/沃克.png" ></li>
				<li><img src="../img/穆雷.png" ></li>
				<li><img src="../img/小波特.png" ></li>
				<li><img src="../img/小波特.png" ></li>
			</ul>
			<div id="navDiv">
				<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>